<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="160px">
        <div class="aside">
          <div class="logIcon">
            IT SOURCE
          </div>
          <el-menu :default-active="leftNavActiveIndex" class="el-menu-vertical-demo">
            <el-menu-item @click="handlerAddTabPan(item)" :index="item.index" :key="index"
              v-for="(item, index) in leftNav">{{ item.name }}</el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div class="">
            <div class="headerNav">
              <el-menu :default-active="topNavActiveIndex" class="el-menu-demo myNav" mode="horizontal"
                @select="handleSelect">
                <el-menu-item :index="item.index" :key="index" v-for="(item, index) in topNav">{{
                  item.name }}</el-menu-item>
              </el-menu>
              <div class="myAcount">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="about">资料</el-dropdown-item>
                      <el-dropdown-item @click="logOut">登出</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </div>
        </el-header>
        <el-main>
          <RouterView @setActiveIndex="setActiveIndex"></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import { nextTick, ref } from "vue"
import { RouterLink, RouterView } from 'vue-router'
import utils from "@/common/utils.js"
import nav from "@/data/nav.js"
export default {
  name: "managerHome",
  data() {
    return {
      topNav: nav,
      leftNav: nav[0].leftNav,
      leftNavActiveIndex: "0",
      topNavActiveIndex: "0"
    }
  },
  created() {
    this.setActiveIndex()
    this.loadData()
  },
  methods: {
    setActiveIndex() {
      let paramsObj = utils.getHrefSeachParams()
      this.$nextTick(() => {
        if (Object.keys(paramsObj).length) {
          this.topNavActiveIndex = paramsObj.index.split("-")[0]
          this.leftNavActiveIndex = paramsObj.index.split("-")[1]
        } else {
          this.topNavActiveIndex = nav[0].index
          this.leftNavActiveIndex = "0"
        }
        this.handleSelect(this.topNavActiveIndex, 0, 0)
      })
    },
    loadData() {
      // 默认加载顶部导航的第一个列表页，
      // 如果存在已选择的单行就加载导航的子级导航
    },
    about() {
      const item = { name: "admin", src: '/src/components/manager/personData/index.vue', name: "个人介绍", _id: parseInt(Math.random() * 100) + 1 }
      this.handlerAddTabPan(item)
    },
    handleSelect(index, indexPath, item) {
      this.topNavActiveIndex = index
      this.leftNav = this.topNav.find(x => x.index == index).leftNav || []
    },
    handlerAddTabPan(item) {
      this.leftNavActiveIndex = item.index
      if (item.src && item.src.trim())
        this.$router.replace({ name: "tab", query: { src: item.src, name: item.name, index: item.parent + "-" + item.index, _id: parseInt(Math.random() * 100) + 1 } })
      // this.$router.replace({ name: "tab", query: { src: item.src, name: item.name, index: item.parent + "-" + item.index} })
    },
    logOut() {
      this.$router.push("/managerLogin")
    }
  }
}

</script>
<style scoped>
/* @import url(); 引入css类 */
.common-layout,
.aside,
.el-aside,
.el-container {
  height: 100%;
}

.logIcon {
  height: var(--iconH);
  border: 1px solid #dfdfdf;
  border-top: none;
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: large;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  min-height: 400px;
}

.el-menu {
  height: calc(100% - var(--iconH));
}

.headerNav {
  height: 100%;
  border-bottom: 1px solid #dfdfdf;
  display: flex;
}

.myNav {
  flex: 95%;
}

.myAcount {
  flex: auto;
  display: flex;
  align-items: center;
  justify-content: right;
}

.el-header {
  padding: 0px;
}

.el-main {
  padding: 0px;
}

.el-menu-demo {
  border: none;
}
</style>